<template>
  <!-- 种植历史列表 -->
  <div class="farm-card-main">
    <el-card
      :body-style="{
        padding: 0,
        margin: '10px',
        borderRadius: '10px',
        borderRadius: '14px'
      }"
      shadow="always"
    >
      <div
        v-for="item in stockItemList"
        :key="item.id"
      >
        <el-card
          :body-style="{
            padding: 0,
            margin: 0,
            borderRadius: '10px',
            borderRadius: '14px'
          }"
          v-loading="tableLoading"
          shadow="always"
        >
          <div class="farm-item-container">
            <div class="list_">
              <div class="list-left">
                <img
                  src="../../../../../assets/img/moractiveBg.jpeg"
                  width="90"
                />
                <div class="plant_info">
                  <div class="plant_infotop">
                    <span style="font-weight: 700;font-size:22px;margin:0 15px;">{{ item.name }}</span>
                    <span class="text">{{ item.varieties }}</span>
                    <span class="text">{{ item.varietiesnum }}亩</span>
                    <span class="text">{{ item.plantnum }}万株/亩</span>
                  </div>
                  <div class="core">
                    <!-- <span>预计产量：{{ item.yield||"暂无产量信息" }}亩</span> -->
                    <span>种植时间：{{ item.CreationTime }}</span>
                  </div>
                </div>
              </div>
              <div class="list-right">
                产量：<span>{{ item.ton }}</span>吨
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div
        class="flex-wrap"
        style="align-items: center;justify-content: center"
      >
        <page-plugin
          v-show="true"
          :pages="page.pages"
          :total="page.total"
          label="种植历史"
          :page.sync="page.pageNo"
          :limit.sync="page.pageSize"
          @changePageNum="changePageNum"
        />
        <!-- @size-change="handleSizeChange" -->
      </div>
    </el-card>
  </div>
</template>

<script>
import pagePlugin from "@/components/page-plugin"
import { selectPlantHistory } from "@/api/farmEvent"
export default {
  components: {
    "page-plugin": pagePlugin
  },
  data () {
    return {
      tableLoading: false,
      params: {
        landId: 1,
        plant: 0
      },
      // 分页
      page: {
        pages: 1,//页码
        total: 1,//总数量
        pageNum: 1,
        pageSize: 10,
        // radio1: '全部',
      },
      stockItemList: [
        {
          name: "水稻",
          varieties: "龙稻240", //水稻品种
          varietiesnum: "60", //总亩数
          plantnum: "20",
          CreationTime: "2021-5-21至2021年6月6日", //创建时间
          ton: "178" //产量
        }
      ]
    };
  },
  //全部数据
  watch: {
    radio1 (newVal) {
      this.reqParams.collect = newVal !== '全部'
      this.addLoadFn()
    }
  },
  created () {

    this.addLoadFn()

  },
  methods: {
    changePageNum (page) { // 分页点击
      this.reqParams.page = page
      this.addLoadFn()
    },

    async addLoadFn () {
      const data = {
        landId: 11,
        plant: 0,
        page: 1,
        pageSize: 10
      }
      //调用数据
      const res = await selectPlantHistory(data)
      console.log("种植历史", res);
    }
  },
};
</script>

<style scoped>
.farm-item-container {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  margin: 10px;
  /* border-bottom: 1px solid #c4cec9; */
}
.farm-item-container .plant_infotop {
  margin-bottom: 35px;
}
.text {
  padding: 3px 6px;
  margin: 0 10px 10px 10px;
  font-size: 14px;
  color: #11c26d;
  border: 1px solid #11c26d;
}
.core {
  margin: 0 15px;
}
.list_ {
  display: contents;
}
.list-left {
  display: flex;
}
.list_ .list-right {
  margin-top: 30px;
  font-size: 20px;
  padding-right: 60px;
}
.list-right span {
  font-size: 40px;
  color: #55c868;
  padding: 0 5px;
  font-weight: 700;
}
.flex-wrap {
  margin: 15px 0;
  display: flex;
  align-items: center;
}
</style>
